{% if isFramework("javascript") %}
The interface for the Cell Component is as follows:
{% /if %}

{% if isFramework("javascript") %}
```ts
interface ICellRendererComp {
    // Optional - props for rendering.
    init?(props: ICellRendererParams): void;

    // Mandatory - Return the DOM element of the component, this is what the grid puts into the cell
    getGui(): HTMLElement;

    // Optional - Gets called once by grid after rendering is finished - if your renderer needs to do any cleanup,
    // do it here
    destroy?(): void;

    // Mandatory - Get the cell to refresh. Return true if the refresh succeeded, otherwise return false.
    // If you return false, the grid will remove the component from the DOM and create
    // a new component in its place with the new values.
    refresh(params: ICellRendererParams): boolean;
}
```
{% /if %}

{% if isFramework("javascript") %}
The Component is provided `props` containing, amongst other things, the value to be rendered.
{% /if %}

{% if isFramework("javascript") %}
```ts
class CustomButtonComponent {
    // ...
    init(props) {
        // create the cell
        this.eGui = document.createElement('div');
        this.eGui.innerHTML = props.value;
    }
    // ...
}
```
{% /if %}